[小ネタ] “package-lock.json” ファイルが GitHub でのマージコンフリクトが発生したときの解消方法

はじめに

こんにちは。アノテーションの及川です。

NPM(Node Package Manager)の様々なパッケージ（ライブラリ）の依存関係をまとめた package.json と packgae-lock.json ファイルを持つ　Node.js プロジェクトにおいて、共同開発を行っている際に度々発生する GitHub でのマージコンフリクトの解消方法について小ネタとして記載します。

どうしてマージコンフリクトが発生するのか

様々な要因が考えられますが、一例として下記のようなケースが組み合わさることで発生することがあります。

• 複数の開発者が異なるタイミングで packgae.json や package-lock.json ファイルに対して依存パッケージを追加、更新、削除を行い、そのファイルを GitHub リポジトリ上のブランチ（ここでは仮に main ブランチとします）に反映（push）する
• 別の開発者が GitHub リポジトリ上の　main　ブランチの最新の変更をローカル環境に読み込み（pull）せず、古い package.json、package-lock.json ファイルを基に作業を行い、その成果物を GitHub リポジトリの main ブランチにプッシュする

Resolve conflicts (GitHub)

マージコンフリクトが発生した際は、下図のような画面の表示が確認できます。

Resolve conflicts ボタンをクリックすると、mainブランチの最新ファイルと同じファイル（pushしたもの）の同じ行に対して、異なる変更が起きている状況をコンフリクトに該当する分だけ確認できます。

これらで確認できた矛盾する行について、どの変更内容を残すか等を決めてマージコンフリクトを解消することができます。

実際の操作方法などの詳細については、こちらの GitHub の公式ドキュメントをご参照ください。

Resolve conflicts ボタンより修正はおすすめしないファイル

ここで、本タイトルに記載されている、package-lock.jsonファイルの話に入ります。

package-lock.json ファイルについてもコンフリクトが発生していれば、前述のように　Resolve conflicts ボタンのクリックから、GitHub 上にて手動で変更することが可能です。

しかしながら、マージコンフリクトにてファイルを修正後の　GitHub Actions のワークフロー（※）で設定されている npm ci コマンドのステップで下記エラー（抜粋）を確認しました。

Run npm ci
  npm ci
  shell: /usr/bin/bash -e {0}
  env:
    VOLTA_HOME: /opt/hostedtoolcache/volta/1.1.1/x64

npm ERR! code EUSAGE
npm ERR! 
npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
npm ERR! 
npm ERR! Missing: [email protected] from lock file
・
・
・
（後略）

(※)　GitHub Actionsとは

ソフトウェア開発のライフサイクルにおける自動化されたプロセス（ビルド、テスト、デプロイなど）を定義し、GitHubリポジトリのイベントに応じて実行される一連のジョブです。

詳細についてはこちらをご参照ください

エラーメッセージから確認したこと

前述のエラーメッセージは、npm ci コマンドを実行しようとした際に、package.jsonとpackage-lock.json（またはnpm-shrinkwrap.json）が同期していないために問題が発生したことが確認できます。

例えば上記のエラーの場合、 package-lock.json ファイルに jest パッケージのバージョン29.7.0が記載されていないということがエラー原因であるものと見受けられます。

npm ciコマンドは、package-lock.json　または　npm-shrinkwrap.json　に基づいて正確な依存関係をインストールするために使用されます。

そのため、Resolve conflicts ボタンのクリックより GitHub　上にて手動で変更した部分だけでは、package-lock.json ファイルに記載されている依存関係を正確に満たすことができていなかったことが考えられます。

解消方法

当該 packgae-lock.json がコンフリクト状態であるブランチをリモートから自分のローカル環境に読み込み、下記の手順（ファイル修正、コマンド実行等）にて packgae-lock.json ファイルのマージコンフリクトが解消されたことを確認しました。

解消方法の一例として下記に記載します。

手順

1. git pull origin <当該 packgae-lock.json がコンフリクト状態であるブランチ名）>
2. package.json ファイルの dependencies または、devDependencies に記載されているパッケージのバージョンを、リモートリポジトリの最新のmainブランチの内容と同じ内容に修正する
3. npm install を実行して、package-lock.json ファイルを更新する
4. git add .
5. git commit -m <コミットメッセージ>
6. git push origin <当該 packgae-lock.json がコンフリクト状態であるブランチ名）>

まとめ

共同開発を実施している状況下における package-lock.json ファイルが GitHub でのマージコンフリクトが発生したときのエラー内容や解消方法までの一例の過程を記載しました。

この記事が誰かのお役に立てば幸いです。

アノテーション株式会社について

アノテーション株式会社はクラスメソッドグループのオペレーション専門特化企業です。サポート・運用・開発保守・情シス・バックオフィスの専門チームが、最新 IT テクノロジー、高い技術力、蓄積されたノウハウをフル活用し、お客様の課題解決を行っています。当社は様々な職種でメンバーを募集しています。「オペレーション・エクセレンス」と「らしく働く、らしく生きる」を共に実現するカルチャー・しくみ・働き方にご興味がある方は、アノテーション株式会社 採用サイトをぜひご覧ください。

参考資料

• GitHub でのマージ コンフリクトを解決する - GitHub Docs

• GitHub Actions ドキュメント - GitHub Docs